<!-- home.html -->

<div class="sub-page home-page">
    <!-- 账户总览导航头 -->
    <ul class="nav">
		<li>
			<span>开始日期: </span><input type="text" readonly ng-model="date.start" class="form_datetime">
		</li>
		<li>
			<span>结束日期: </span><input type="text" readonly ng-model="date.end" class="form_datetime">
		</li>
		<li>
			<span class="btn btn-default" ng-click="cx()">查  询</span>
		</li>
		<li style="color: #AAA">历史流水可能不全，调整开始时间减少误差(相关信息，仅供参考)</li>
	</ul>

	<!-- 内容区域 -->
	<div class="home-all row">
		<div class="home-sec col-md-4 col-xs-4" style="padding-right: 5px;">
			<div class="panel panel-default">
				<div class="panel-heading">
					<span class="circle"></span>
					账户信息
			    </div>
			    <div class="panel-body row">
			        <li class="col-md-6 col-xs-6"><label>姓&nbsp&nbsp&nbsp&nbsp名:&nbsp&nbsp</label><span class="blue">{{$parent.userinfo[0][1]}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>营业部 :&nbsp&nbsp</label><span>{{$parent.userinfo[2][1]}}</span></li>
			        <li class="col-md-12 col-xs-12"><label>券&nbsp&nbsp&nbsp&nbsp商:&nbsp&nbsp</label><span class="blue">{{$parent.userinfo[1][1]}}</span></li>
			        <li class="sy-info" ng-class="{true: 'syRed',false: 'syGreen'}[dataZhxx.yk  >= 0]"><span>盈亏</span><br><span>{{dataZhxx.yk | numberFormat}}</span></li>
			        <li class="sy-info" ng-class="{true: 'syRed',false: 'syGreen'}[dataZhxx.syl >= 0]"><span>收益率</span><br><span>{{dataZhxx.syl | numberFormat:1}}</span></li>
			    </div>
			</div>

			<div class="panel panel-default ">
				<div class="panel-heading">
					<span class="circle"></span>
					区间收益
			    </div>
			    <div class="panel-body row">
			        <li class="col-md-6 col-xs-6"><label>区间收益 :&nbsp&nbsp</label><span ng-class="{true: 'syRed',false: 'syGreen'}[dataZhxx.yk >= 0]">{{dataQjsy.qjsy | numberFormat}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>期初资产 :&nbsp&nbsp</label><span>{{dataQjsy.qczc}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>收益率 :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label><span ng-class="{true: 'syRed',false: 'syGreen'}[dataZhxx.syl >= 0]">{{dataQjsy.syl | numberFormat:1}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>区间成交 :&nbsp&nbsp</label><span>{{dataQjsy.qjcj}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>区间投入 :&nbsp&nbsp</label><span>{{dataQjsy.qjtr}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>累计投入 :&nbsp&nbsp</label><span>{{dataQjsy.ljtr}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>最大上涨 :&nbsp&nbsp</label><span>{{dataQjsy.zdsz}}</span></li>     
			        <li class="col-md-6 col-xs-6"><label>最大回撤 :&nbsp&nbsp</label><span>{{dataQjsy.zdhc}}</span></li>
			    </div>
			</div>

			<div class="panel panel-default ">
				<div class="panel-heading">
					<span class="circle"></span>
					收益走势
			    </div>
			    <div class="panel-body row syzs">
			        <ul class="panel-nav">
			        	<li class='chooseLi' ng-class="{'active': syzsIndex==0}" ng-click="dealQjsy(0)">近三月</li>
			        	<li class='chooseLi' ng-class="{'active': syzsIndex==1}" ng-click="dealQjsy(1)">近半年</li>
			        	<li class='chooseLi' ng-class="{'active': syzsIndex==2}" ng-click="dealQjsy(2)">近一年</li>
			        </ul>
			        <div id="syzs"></div>
			    </div>
			</div>
		</div>

		<div class="home-sec col-md-4 col-xs-4">
			<div class="panel panel-default " >
				<div class="panel-heading">
					<span class="circle"></span>
					资产信息
			    </div>
			    <div class="panel-body row">
			        <ul class="panel-nav" ng-show='{{dataZcxx.length>1}}'>
			        	<li class='chooseLi' ng-repeat="list in dataZcxx track by $index" ng-class="{'active': zcxxIndex==$index}" ng-click="zcxxIndex=$index">{{list.moneyCode}}</li>
			        </ul>
			        <li class="col-md-6 col-xs-6"><label>总资产 :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label><span>{{dataZcxx[zcxxIndex].zzc}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>总负债 :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label><span>{{dataZcxx[zcxxIndex].zfz}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>净资产 :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label><span>{{dataZcxx[zcxxIndex].jzc}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>资金余额 :&nbsp&nbsp</label><span>{{dataZcxx[zcxxIndex].zjye}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>持仓市值 :&nbsp&nbsp</label><span>{{dataZcxx[zcxxIndex].ccsz}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>融资负债 :&nbsp&nbsp</label><span>{{dataZcxx[zcxxIndex].rzfz}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>融券负债 :&nbsp&nbsp</label><span>{{dataZcxx[zcxxIndex].rqfz}}</span></li>
			        <li class="col-md-6 col-xs-6"><label>质押负债 :&nbsp&nbsp</label><span>{{dataZcxx[zcxxIndex].zyfz}}</span></li>
			    </div>
			</div>

			<div class="panel panel-default">
				<div class="panel-heading">
					<span class="circle"></span>
					盈利分解
			    </div>
			    <div class="panel-body oneBox">
			        <ul class="panel-nav row">
			        	<li class='chooseLi' ng-class="{'active': ylfjIndex==0}" ng-click="qjylfjIndex(0)">最赚钱股票</li>
			        	<li class='chooseLi' ng-class="{'active': ylfjIndex==1}" ng-click="qjylfjIndex(1)">最亏钱股票</li>
			        </ul>
			        <div class="" ng-repeat="profit in profits" ng-hide="((ylfjIndex==0) && (profit.proMoney<=0)) || ((ylfjIndex==1) && (profit.proMoney>=0))">
			    		<div class="row">
			    			<p class="col-md-6 col-xs-6 text-left name">{{profit.name}}</p>
			    			<p class="col-md-6 col-xs-6 text-right proMoney" ng-class="{true: 'text-danger',false: 'text-success'}[profit.proMoney>=0]">{{profit.proMoney}}</p>
			    		</div>
			    		<div class="progress">
			    			<div ng-class="{true: 'progress-bar progress-bar-danger',false: 'progress-bar progress-bar-success'}[profit.proMoney>=0]" style="width: {{profit.procent}};">
			    				<span class="sr-only"></span>
			    			</div>
			    		</div>
			    		<div class="row">
			    			<p class="col-md-6 col-xs-4 text-left">{{'持股'+profit.hold_day+'天'}}</p>
			    			<p class="col-md-6 col-xs-8 text-right">{{'本期收益'+profit.rate_profit}}</p>
			    		</div>
			    	</div>
			    </div>
			</div>
		</div> 

		<div class="home-sec col-md-4 col-xs-4" style="padding-left: 5px;">
			<div class="panel panel-default">
				<div class="panel-heading">
					<span class="circle"></span>
					资产分布
			    </div>
			    <div class="panel-body" id="zcfb"></div>
			</div>

			<div class="panel panel-default ">
				<div class="panel-heading">
					<span class="circle"></span>
					日均换手
			    </div>
			    <div class="panel-body" id="rjhs">
			    	<ul class="panel-nav" style="width: 100%;text-align: left;">
			        	<li class='chooseLi' ng-class="{'active': rjhsIndex==0}" ng-click="rjhs(0)">近三月</li>
			        	<li class='chooseLi' ng-class="{'active': rjhsIndex==1}" ng-click="rjhs(1)">近半年</li>
			        	<li class='chooseLi' ng-class="{'active': rjhsIndex==2}" ng-click="rjhs(2)">近一年</li>
			        </ul>
			    	<div><strong>{{rjhsData.hsv}}%</strong></div>
			    	<div style="background-image:url(../assetalspc/pages/image/syhs3.png);width: 230px;height: 12px;margin: 0 auto;margin-top: 15px;">
			    		<p style="display: block;width: 5px;height: 100%;background-color: #1E90FF;margin-left: {{rjhsData.hsv}}%;"></p>
			    	</div>
			    	<div style="width: 230px;height: 18px;margin: 0 auto;line-height: 18px;">
		    			<p class="rjhs_p" style="float: left;">低</p>
		    			<p class="rjhs_p">中</p>
		    			<p class="rjhs_p" style="float: right;">高</p>
		    		</div>
			    	<div class="lastWord">相当于每<span>{{rjhsData.perDay}}</span>天将持仓股票全部换一遍</div>
			    </div>
			</div>

			<div class="panel panel-default ">
				<div class="panel-heading">
					<span class="circle"></span>
					收益波动
			    </div>
			    <div class="panel-body" id="sybd">
			    	<ul class="panel-nav" style="float: left;">
			        	<li class='chooseLi' ng-class="{'active': sybdIndex==0}" ng-click="sybd(0)">近三月</li>
			        	<li class='chooseLi' ng-class="{'active': sybdIndex==1}" ng-click="sybd(1)">近半年</li>
			        	<li class='chooseLi' ng-class="{'active': sybdIndex==2}" ng-click="sybd(2)">近一年</li>
			        </ul>
			    	<img src="../assetalspc/pages/image/syhs1.png" id="img1" style="clear: both; display: block;position: relative;top:20px;left: {{sybdData.aWidth}}">
			    	<img src="../assetalspc/pages/image/syhs2.png" id="img2" style="left: {{sybdData.bWidth}};transform:rotate({{sybdData.transrorm}}deg);-ms-transform:rotate({{sybdData.transrorm}}deg); -moz-transform:rotate({{sybdData.transrorm}}deg); -webkit-transform:rotate({{sybdData.transrorm}}deg);-o-transform:rotate({{sybdData.transrorm}}deg);">
			    	<p style="margin-top: 10px;margin-bottom: 5px;"><strong>{{sybdData.sybdText.slice(0,4)}}</strong></p>
			    	<p>{{sybdData.sybdText.slice(4)}}</p>
			    </div>
			</div>
		</div>
	</div>
</div>


